<template>
  <div class="app-container">
    <el-button v-if="checkPermission(permissionRoles.server_region_add)" type="primary" @click="handleAdd">新增服务器大区</el-button>

    <el-table v-loading="listLoading" :data="list" class="mt-30" border>
      <el-table-column align="center" label="大区ID" width="60px" prop="id"></el-table-column>
      <el-table-column align="center" label="大区名称" width="100px" prop="name"></el-table-column>
      <el-table-column align="center" label="备注" width="300px" prop="remark"></el-table-column>
      <el-table-column align="center" label="对应渠道" width="300px" prop="cid_name"></el-table-column>
      <el-table-column align="center" label="世界频道" prop="channel2"></el-table-column>
      <el-table-column align="center" label="联盟频道" prop="channel3"></el-table-column>
      <el-table-column align="center" label="私聊频道" prop="channel4"></el-table-column>
      <el-table-column align="center" label="异常战斗拦截开关">
        <template slot-scope="{row}">
          <el-switch v-model="row.error_battle_intercept" active-value="1" inactive-value="0" @change="handleSwitch(row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="120px">
        <template slot-scope="scope">
          <el-button v-if="checkPermission(permissionRoles.server_region_edit)" type="text" @click="handleEdit(scope)">编辑</el-button>
          <el-button v-if="checkPermission(permissionRoles.server_region_edit)" type="text" @click="handleChat(scope.row)">聊天频道</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" :title="textMap[dialogType]" :close-on-click-modal="false">
      <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="80px" label-position="left">
        <el-form-item label="大区ID" prop="id">
          <el-input v-model="dataForm.id" :disabled="idDisabled" class="defaut-input" placeholder="填写大区ID" />
        </el-form-item>
        <el-form-item label="大区名称" prop="name">
          <el-input ref="name" v-model="dataForm.name" class="defaut-input" placeholder="填写大区名称" />
        </el-form-item>
        <el-form-item label="备注" prop="title">
          <el-input v-model="dataForm.remark" class="defaut-input" placeholder="填写备注" />
        </el-form-item>
        <el-form-item label="对应渠道" prop="cids">
          <el-select v-model="dataForm.cids" class="defaut-input" multiple filterable clearable>
            <el-option
              v-for="item in channelList"
              :key="item.cid"
              :label="item.name"
              :value="item.cid"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="tr">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="chatDialogVisible" :title="'聊天频道限制-大区：'+srid+'-'+srname" :close-on-click-modal="false">
      <el-form ref="chatDataForm" :model="chatDataForm" label-width="80px" label-position="left">
        <el-form-item label="世界频道"></el-form-item>
        <el-form-item label="发言VIP">
          <el-input v-model="chatDataForm.channel2.vip" class="defaut-input" placeholder="VIP等级" />
        </el-form-item>
        <el-form-item label="发言等级">
          <el-row>
            <el-col :md="3"><el-button type="primary" class="add" size="mini" icon="el-icon-plus" @click="c2Add">添加</el-button></el-col>
          </el-row>
          <el-row v-for="(item, index) in chatDataForm.channel2.levels" :key="index" class="mt-5" :gutter="12">
            <el-col :md="4"><el-input v-model="item.day" placeholder="开服天数" /></el-col>
            <el-col :md="4"><el-input v-model="item.level" placeholder="等级" /></el-col>
            <el-col :md="4"><el-button type="danger" size="mini" icon="el-icon-delete" @click.prevent="removec2(item, index)" /></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="联盟频道"></el-form-item>
        <el-form-item label="发言VIP">
          <el-input v-model="chatDataForm.channel3.vip" class="defaut-input" placeholder="VIP等级" />
        </el-form-item>
        <el-form-item label="发言等级">
          <el-row>
            <el-col :md="3"><el-button type="primary" class="add" size="mini" icon="el-icon-plus" @click="c3Add">添加</el-button></el-col>
          </el-row>
          <el-row v-for="(item, index) in chatDataForm.channel3.levels" :key="index" class="mt-5" :gutter="12">
            <el-col :md="4"><el-input v-model="item.day" placeholder="开服天数" /></el-col>
            <el-col :md="4"><el-input v-model="item.level" placeholder="等级" /></el-col>
            <el-col :md="4"><el-button type="danger" size="mini" icon="el-icon-delete" @click.prevent="removec3(item, index)" /></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="私聊频道"></el-form-item>
        <el-form-item label="发言等级">
          <el-row>
            <el-col :md="3"><el-button type="primary" class="add" size="mini" icon="el-icon-plus" @click="c4Add">添加</el-button></el-col>
          </el-row>
          <el-row v-for="(item, index) in chatDataForm.channel4.levels" :key="index" class="mt-5" :gutter="12">
            <el-col :md="4"><el-input v-model="item.day" placeholder="开服天数" /></el-col>
            <el-col :md="4"><el-input v-model="item.level" placeholder="等级" /></el-col>
            <el-col :md="4"><el-button type="danger" size="mini" icon="el-icon-delete" @click.prevent="removec4(item, index)" /></el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="tr">
        <el-button type="danger" @click="chatDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="chatConfirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { deepClone } from '@/utils'
import checkPermission from '@/utils/permission'
import { getChannelList, getServerRegionList, handleServerRegion, deleteServerRegion, handleChat, handleSwithBattle } from '@/api/ops'

const defaultItem = {
  id: '',
  name: '',
  remark: '',
  cids: []
}

const chatItem = {
  srid: '',
  channel2: {
    vip: '',
    channel: 2,
    levels: [{
      day: '',
      level: ''
    }]
  },
  channel3: {
    vip: '',
    channel: 3,
    levels: [{
      day: '',
      level: ''
    }]
  },
  channel4: {
    vip: '',
    channel: 4,
    levels: [{
      day: '',
      level: ''
    }]
  }
}
export default {
  name: 'ServerRegion',
  data() {
    return {
      permissionRoles: this.$store.state.user.permissionRoles,
      listLoading: false,
      dataForm: Object.assign({}, defaultItem),
      chatDataForm: Object.assign({}, chatItem),
      rules: {
        id: [{ required: true, message: 'ID必填', trigger: 'blur' }],
        name: [{ required: true, message: '名称必填', trigger: 'blur' }]
      },
      list: [],
      dialogVisible: false,
      chatDialogVisible: false,
      idDisabled: false,
      battleSwitch: '0',
      channelList: [],
      srid: '',
      srname: '',
      dialogType: 'new',
      textMap: {
        edit: '编辑',
        new: '新增'
      }
    }
  },
  computed: {
  },
  created() {
    this.getServerRegionList()
    this.getChannel()
  },
  methods: {
    checkPermission,
    async getServerRegionList() {
      this.listLoading = true
      const res = await getServerRegionList()
      this.listLoading = false
      this.list = res.data
      res.data.forEach(element => {
        if (element.error_battle_intercept === 1) this.battleSwitch = '1'
      })
    },
    async getChannel() {
      const channelList = await getChannelList()
      console.log(channelList)
      this.channelList = channelList.data.items
      console.log(this.channelList)
    },
    handleAdd() {
      this.dataForm = Object.assign({}, defaultItem)
      this.dialogType = 'new'
      this.dialogVisible = true
      this.idDisabled = false
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.idDisabled = true
      const row = scope.row
      console.log(row)
      this.dataForm = deepClone(row)
      console.log(this.dataForm)
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleChat(row) {
      if (row.chat_limits.length === 0) {
        this.chatDataForm = Object.assign({}, chatItem)
      } else {
        this.chatDataForm = row.chat_limits
      }
      this.chatDataForm.srid = row.id
      this.srid = row.id
      this.srname = row.name
      this.chatDialogVisible = true
    },
    handleDelete({ $index, row }) {
      this.$confirm('你确定要删除此列吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await deleteServerRegion(row.id)
          this.list.splice($index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(err => { console.error(err) })
    },
    chatConfirmSubmit() {
      this.$refs['chatDataForm'].validate((valid) => {
        if (valid) {
          handleChat(this.chatDataForm).then(response => {
            if (response.status) {
              this.chatDialogVisible = false
              this.getServerRegionList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            }
          })
        }
      })
    },
    confirmSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          handleServerRegion(this.dataForm).then(response => {
            if (response.status) {
              this.dialogVisible = false
              this.getServerRegionList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            }
          })
        }
      })
    },
    handleSwitch(row) {
      this.$confirm('你确定要操作异常战斗拦截开关吗?', '异常战斗拦截开关', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          handleSwithBattle(row.id, row.error_battle_intercept).then(response => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getList()
          })
        })
        .catch(err => { console.error(err) })
    },
    timingAdd(row) {
      if (this.dataForm.timings.length === 6) {
        return
      }
      this.dataForm.timings.push({
        time: '',
        days: ''
      })
    },
    remove(row, index) {
      if (index !== -1) {
        this.dataForm.timings.splice(index, 1)
      }
    },
    c2Add(row) {
      if (this.chatDataForm.channel2.levels.length === 5) {
        return
      }
      this.chatDataForm.channel2.levels.push({
        day: '',
        level: ''
      })
    },
    removec2(row, index) {
      if (index !== -1) {
        this.chatDataForm.channel2.levels.splice(index, 1)
      }
    },
    c3Add(row) {
      if (this.chatDataForm.channel3.levels.length === 5) {
        return
      }
      this.chatDataForm.channel3.levels.push({
        day: '',
        level: ''
      })
    },
    removec3(row, index) {
      if (index !== -1) {
        this.chatDataForm.channel3.levels.splice(index, 1)
      }
    },
    c4Add(row) {
      if (this.chatDataForm.channel4.levels.length === 5) {
        return
      }
      this.chatDataForm.channel4.levels.push({
        day: '',
        level: ''
      })
    },
    removec4(row, index) {
      if (index !== -1) {
        this.chatDataForm.channel4.levels.splice(index, 1)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table {
  font-size: 14px;
}
.el-table td, .el-table th {
  padding: 10px 0;
}
.el-table th>.cell {
  padding-left: 10px;
  padding-right: 10px;
}
</style>
